<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="需求信息" :visible.sync="dialogVisible" @close="resetForm()" width="400px">
        <div class="info_box xuqiu-box" v-html="info"></div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm()" class="el-button-width" size="small">取 消</el-button>
            <el-button type="primary" @click="resetForm()" class="el-button-width" size="small" :disabled='disabled' :loading="disabled">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            disabled: false,
            dialogVisible: false,
            info:'',
        };
    },

    created() {
        this.$bus.on("viewVideoInfo", (value) => {
            this.info = this.getUrl(value.info)
            this.dialogVisible = value.dialogVsb;
        });
    },
    beforeDestroy() {
        this.$bus.off("viewVideoInfo");
    },
    methods: {
        getUrl(text){
            const urlRegex = /((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/gi;
            // const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/gi;
            let url = text.match(urlRegex);
            const replacedText = text.replace(urlRegex,`<a target="_blank" href="${url}">${url}</a>`); 
            return replacedText
        },

        // 关闭重置表单
        resetForm() {
            this.info = ''
            this.dialogVisible = false;
        },
    },
};
</script>
<style scoped>
.info_box{
    font-size: 14px;
    color: #17233D;
    line-height: 20px;
    padding: 10px;
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
}
</style>

<style>
.xuqiu-box a{
    text-decoration: none;
    color: #4475ff;
}
</style>

